<template>
	<!-- 有权限 -->
	<!-- <template v-show="classItem.disable === 0"> -->
	<!-- <video ref="videoRef" class="video-js" style="width:100%;height: 100%;"></video> -->

	<!-- <videoPlay  width="100%"   @play="onPlay" @pause="onPause"
		@timeupdate="onTimeupdate" @canplay="onCanplay" /> -->
	<vue3videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
	<!-- </template> -->

	<!-- 没有权限 -->
	<!-- <template v-show="classItem.disable === 1">
		<div class="left__videoEl__jurisdiction df fdc jc ac">
			<img src="@/assets/images/nostdy.png" alt="">
			<div class="title">
				当前权限过低，请咨询客服开通
			</div>
			<div class="btn">咨询客服</div>
		</div>
	</template> -->
</template>

<script setup lang="ts">
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
//组件命名-----
defineOptions({ name: "videoc-videoitem" })
const props = withDefaults(defineProps<{
	classItem?: any;
}>(), {
	classItem: () => { }
});
const options = reactive({
	width: "100%",
	height: "515px",
	color: "#409eff",
	muted: false, //静音
	webFullScreen: false,
	autoPlay: false, //自动播放
	currentTime: 0,
	loop: false, //循环播放
	mirror: false, //镜像画面
	ligthOff: false, //关灯模式
	volume: 0.3, //默认音量大小
	control: true, //是否显示控制器
	title: "", //视频名称
	type: "video/mp4",
	src: props.classItem.url, //视频源
	poster: "", //封面
	controlBtns: [
		"audioTrack",
		"quality",
		"speedRate",
		"volume",
		"setting",
		"pip",
		"pageFullScreen",
		"fullScreen",
	],
});
console.log("🚀 ~ options:", options)

const onPlay = (ev) => {
	console.log('播放')
}
const onPause = (ev) => {
	console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
	console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
	console.log(ev, '可以播放')
}
onMounted(() => {
	// initVideo()
})
// watch(() => props.classItem, (item) => {
// 	options.autoPlay = false
// 	options.src = item.url
// 	// videoInstance.value.src({ src: props.classItem.url })
// })
</script>

<style lang="scss" scoped>
.left__videoEl__jurisdiction {
	height: 100%;
	background-color: #ffffff;

	img {
		width: 200px;
		height: auto;
		object-fit: contain;
	}

	.title {
		font-size: 18px;
		color: $color1;
		margin: 30px 0;
	}

	.btn {
		width: 190px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: $bcolor;
		border-radius: 22px;
		cursor: pointer;
	}
}
</style>
